<script setup>
import { ref, watch } from 'vue';

import LoginPart from './components/LoginPart.vue';
import RegisterPart from './components/RegisterPart.vue';
import ForgetPasswdPart from './components/ForgetPasswdPart.vue';

const isShowRegister = ref(false);
const isShowForgetPasswd = ref(false);

const loginPartRef = ref();
const registerPartRef = ref();
const forgetPasswdPartRef = ref();

// 登录/注册切换时，清空表单数据
watch(isShowRegister, () => {
  loginPartRef.value && loginPartRef.value.resetLogin();
  registerPartRef.value && registerPartRef.value.resetRegister();
});

// 登录/忘记密码切换时，清空表单数据
watch(isShowForgetPasswd, () => {
  loginPartRef.value && loginPartRef.value.resetLogin();
  forgetPasswdPartRef.value && forgetPasswdPartRef.value.resetForgetPasswd();
});
</script>

<template>
  <el-row class="login-page">
    <el-col :span="12" class="bg"></el-col>
    <el-col :span="6" :offset="3" class="form">
      <!--登录相关表单-->
      <login-part
        v-if="!isShowRegister && !isShowForgetPasswd"
        ref="loginPartRef"
        @switchToForgetPasswd="isShowForgetPasswd = true"
        @switchToRegister="isShowRegister = true"
      ></login-part>

      <!-- 注册相关表单 -->
      <register-part
        v-else-if="isShowRegister && !isShowForgetPasswd"
        ref="registerPartRef"
        @finishRegister="isShowRegister = false"
      ></register-part>

      <!-- 忘记密码相关表单 -->
      <forget-passwd-part
        v-else
        ref="forgetPasswdPartRef"
        @finishForgetPasswd="isShowForgetPasswd = false"
      ></forget-passwd-part>
    </el-col>
  </el-row>
</template>
<style lang="scss" scoped>
.login-page {
  height: 100vh;
  background-color: #fff;

  .bg {
    background:
      //url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
      url('@/assets/imgs/login_bg.png') no-repeat center / cover;
    border-radius: 0 20px 20px 0;
  }
}

.form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  user-select: none;
}
</style>
